<template>
  <div class="home-container">
    <div :class="['home-content', $route.path.includes('article') ? 'home-hidden' : '']">
      <div class="content-tab">
        <van-tabs v-model:active="state.current" animated sticky @change="hanleTabChange">
          <van-tab :title="item.name" v-for="(item, index) in state.categoryList" :key="index">
            <van-list
              v-model:loading="state.articleList[state.current].loading"
              :finished="state.articleList[state.current].finish"
              finished-text="没有更多了"
              @load="getArticleList"
            >
              <fs-blog-card
                v-for="(item, index) in state.articleList[state.current].articleList"
                :article-detail="item"
                :key="index"
              ></fs-blog-card>
            </van-list>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="content-detail">
      <router-view v-slot="{ Component }">
        <transition name="article">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import FsBlogCard from "@/components/FsBlogCard/FsBlogCard.vue";
import { getArticleCategory, queryArticleList } from "@/service/api/articleRequest";
import type { IArticle, IArticleCategory } from "@/types/content/articleType";

interface IArticleList {
  limit: number;
  offset: number;
  finish: boolean;
  loading: boolean;
  articleList: IArticle[];
}

onMounted(() => {
  getCategoryList();
});

const state = reactive({
  categoryId: "",
  categoryList: [] as IArticleCategory[],
  articleList: [] as IArticleList[],
  current: 0,
});

const hanleTabChange = (index: number) => {
  state.categoryId = state.categoryList[index].id;
};

const getCategoryList = () => {
  getArticleCategory().then((res) => {
    state.categoryList = [{ id: "", name: "推荐", createdAt: "", updatedAt: "" }, ...res.data.rows];
    state.categoryList.forEach(() => {
      state.articleList.push({
        limit: 5,
        offset: 0,
        finish: false,
        loading: false,
        articleList: [],
      });
    });
  });
};

const getArticleList = async () => {
  const res = await queryArticleList({
    limit: state.articleList[state.current].limit,
    offset: state.articleList[state.current].offset,
    categoryId: state.categoryId,
  });
  state.articleList[state.current].loading = false;
  if (!res.data.length) {
    state.articleList[state.current].finish = true;
  } else {
    state.articleList[state.current].articleList.push(...res.data);
    state.articleList[state.current].offset += state.articleList[state.current].limit;
  }
};
</script>

<style scoped lang="scss">
.home-container {
  width: 100vw;
  height: 100%;
  background-color: var(--box-color);
  overflow: hidden;
  .home-content {
    transition: all 0.6s ease;
  }
  .content-tab {
    width: 100%;
    height: calc(100vh - 60px);
    overflow-y: scroll;
  }
  .home-hidden {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

.article-enter-active {
  animation: articleChange 0.6s;
}

.article-leave-active {
  animation: articleChange 0.3s reverse;
}

@keyframes articleChange {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
